<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="550" height="450" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
    ctx.lineWidth = 4;
    ctx.strokeStyle = 'black';
    ctx.font = "bold 24px sans-serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";

    // Function to draw a light bulb
    function drawBulb(x, y, label) {
        ctx.save();
        ctx.lineWidth = 3;
        ctx.beginPath();
        ctx.arc(x, y, 15, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(x, y, 8, 1.2 * Math.PI, 3.3 * Math.PI);
        ctx.stroke();
        ctx.font = "bold 24px sans-serif";
        ctx.fillText(label, x, y - 25);
        ctx.restore();
    }

    // Draw the rectangular frame lines
    ctx.beginPath();
    ctx.moveTo(100, 100); ctx.lineTo(400, 100);
    ctx.moveTo(100, 180); ctx.lineTo(400, 180);
    ctx.moveTo(100, 260); ctx.lineTo(400, 260);
    ctx.moveTo(100, 100); ctx.lineTo(100, 260);
    ctx.moveTo(400, 100); ctx.lineTo(400, 260);
    ctx.stroke();

    // Erase parts of the frame to place components and wires correctly
    ctx.clearRect(155, 85, 30, 30);
    ctx.clearRect(315, 85, 30, 30);
    ctx.clearRect(235, 165, 30, 30);
    ctx.clearRect(0, 0, canvas.width, 80); // Clear space for the arc
    ctx.clearRect(400, 255, 150, 150); // Clear space for switch
    ctx.clearRect(230, 255, 50, 150); // Clear space for battery

    // Draw Bulbs
    drawBulb(170, 100, "#1");
    drawBulb(330, 100, "#2");
    drawBulb(250, 180, "#3");

    // Draw Battery (ξ)
    ctx.beginPath();
    ctx.moveTo(270, 300); // Long positive pole
    ctx.lineTo(270, 360);
    ctx.moveTo(240, 310); // Short negative pole
    ctx.lineTo(240, 350);
    ctx.stroke();
    ctx.font = "bold 28px serif";
    ctx.fillText("ξ", 255, 290);

    // Draw connecting wires as they appear in the image
    ctx.beginPath();
    // Negative terminal to bottom-left of frame
    ctx.moveTo(240, 350);
    ctx.bezierCurveTo(180, 370, 120, 300, 100, 260);
    // Positive terminal to Switch
    ctx.moveTo(270, 360);
    ctx.lineTo(480, 360);
    ctx.lineTo(480, 300);
    ctx.stroke();

    // Draw Switch S
    ctx.beginPath();
    ctx.moveTo(480, 300);
    ctx.lineTo(490, 300);
    ctx.moveTo(495, 300);
    ctx.lineTo(505, 280);
    ctx.stroke();
    ctx.font = "bold 30px sans-serif";
    ctx.fillText("S", 510, 310);

    // Wire from Switch, arcing over the top
    ctx.beginPath();
    ctx.moveTo(505, 280);
    ctx.bezierCurveTo(520, 200, 450, 40, 400, 90);
    ctx.stroke();

</script>
</body>
</html>